; (function (window) {
  const globalTable = {
    template: `<div class='br-4 clearfix relative global_table config-table-container' style="margin: 0px 0px 10px; border: 1px solid rgb(229, 229, 229)" ref="allWidth" >
      <div class="config-table-wrap"  :style="{'marginRight':butwidth+'px','overflow-x':average*titleData.length > minWidth?'scroll':''}">
        <div :style="average*titleData.length > minWidth?('width:'+average*titleData.length+'px'):'width:'+ minWidth +'px'">
          <ul class="dy-flex l-h-40 text-center hl-global_table_title">
            <li v-for='(item,index) in titleData' :style="item.width?'width:'+item.width+'px':'flex:1'" @click="timeRunk(item)" >{{item.name}}
              <span v-if="item.isRunk" :class="{ 'icon-Gm-sort-default':column != item.column, 'icon-Gm-sort-ascending': item.order == item.orders[0] && column == item.column , 'icon-Gm-sort-descending': item.order == item.orders[1] && column == item.column}">
                <span class="path1"></span><span class="path2"></span>
              </span>
            </li>
          </ul>
          <div>
            <ul class='dy-flex l-h-40 text-center  global_table_item' v-for='(item0,index0) in contentData' @mouseenter="showScroll(index0)" @mouseleave="hideScroll"  :class="hoverIndex == index0?'slideRight':''">
              <li class='ellipsis-1' v-for='(item,index) in titleData' :style="item.width?'width:'+item.width+'px':'flex:1'" :title="item0[item.value]?(item0[item.value].length>overflowlength?item0[item.value]:''):''">{{item.value == 'index'?(index0+1>10?index0:'0'+(index0+1)):(item0[item.value] || '--')}}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="border-l l-h-40 text-center hl-config-table-operate-wrap" >
        <ul>
          <li class="color-gray  hl-global_table_title">操作</li>
          <div ref="butListwidth">
            <li class="operation  hl-global_table_item relative"  v-for='(item,index) in contentData'  :class="hoverIndex == index?'slideRight':''" @mouseenter="showScroll(index)" @mouseleave="hideScroll">
              <slot name="operate" :opData="item" :opIndex="index"></slot>
            </li>
          </div>
        </ul>
      </div>
    </div>`,
    data() {
      return {
        column: "",
        permissions: JSON.parse(localStorage.getItem('permissions')),
        minWidth: '',
        butwidth: '',
        boxwidth: '',
        hoverIndex:null,
      }
    },
    watch: {
     
    },
    props: {
      titleData: Array,
      contentData: Array,
      overflowlength:{
        type:Number,
        default:5
      },
      average:{
        type:Number,
        default:120
      }
    },
    components: {

    },
    watch: {

    },
    mounted() {
      
    },
    updated() {
      this.boxwidth = this.$refs.allWidth.clientWidth
      this.butwidth = this.$refs.butListwidth.clientWidth
      this.minWidth = this.boxwidth - this.butwidth
    },
    methods: {
      showScroll(index){
        this.hoverIndex = index
      },
      hideScroll(){
        this.hoverIndex = null
      },
      setBlockType(val, item) {
        if (val) {
          item.name = item.names[0].name
        } else {
          item.name = item.names[1].name
        }
        return item.name
      },
      setType(list, item) {
        let type = ''
        list.some(single => {
          if (single.code != item) {
            type = single.name
          }
        })
        return type
      },
      timeRunk(item) {
        if (item.isRunk) {
          this.column = item.column
          item.order = item.order == item.orders[0] ? item.orders[1] : item.orders[0]
          this.$emit('on-click-runk', item)
        }
      },
    }
  }

  Vue.component('hl-table', globalTable)

}(window))
